<template>
  <div class="level_content">
    <div class="level_rules">
      <div class="level_tip level_tip_sec cc">
        <span class="icon_xx"></span>
        {{ t('level_page_mAward') }}
        <span class="tips">
                  <i></i>
        {{ t('level_page_vnd') }}<br>

        </span>

      </div>

      <div class="level_list">
        <div class="flex space_around le_l_header">
          <span> {{ t('level_page_member') }} </span>
          <span> {{ t('level_page_pBet') }} </span>
          <span> {{ t('level_page_bonus') }} </span>
          <span> {{ t('level_page_monGift') }} </span>
        </div>
        <div class="flex align_center le_l_content">
          <div class="le_l_l le_l_l_sec">
            <div class="flex space_around le_l_l_tr" v-for="(item, index) in vipLevelRewardConfig" :key="index">
              <span> VIP{{ item.level }} </span>
              <span>
                <nut-price :price="item.target_bet_money" size="small" style="color:#fff;" :decimal-digits="0" thousands
                  :need-symbol="false" />
              </span>
              <span>
                <nut-price :price="item.promotional_reward_status.money" size="small" style="color:#fff;"
                  :decimal-digits="0" thousands :need-symbol="false" />
              </span>
              <span>
                <nut-price :price="item.gift_money_amount" size="small" style="color:#fff;" :decimal-digits="0"
                  thousands :need-symbol="false" />
              </span>
            </div>
          </div>
        </div>

      </div>
      <div class="level_tip level_tip_sec">{{ t('level_upgrade_standard') }}<br></div>
      <div class="level_tip_content">{{ t('level_upgrade_content') }}</div>
      <div class="level_tip level_tip_sec">{{ t('level_feedback_bonus') }}<br></div>
      <div class="level_tip_content">{{ t('level_feedback_content') }}</div>
      <div class="level_tip level_tip_sec">{{ t('level_audit_desc') }}<br></div>
      <div class="level_tip_content">{{ t('level_audit_content') }}</div>
      <div class="level_tip level_tip_sec">{{ t('level_vip_desc') }}<br></div>
      <div class="level_tip_content">{{ t('level_vip_content') }}</div>
      <div class="level_tip level_tip_sec">{{ t('level_explanation') }}<br></div>
      <div class="level_tip_content" style="margin-bottom: 22px;">{{ t('level_explanation_content') }}</div>

<!--      <div class="level_tip_content">-->
<!--        {{ t('level_page_rule_1') }}<br>-->
<!--        {{ t('level_page_rule_2') }}<br>-->
<!--        {{ t('level_page_rule_3') }}<br>-->
<!--        {{ t('level_page_rule_4') }}<br>-->
<!--        {{ t('level_page_rule_5') }}<br>-->
<!--        {{ t('level_page_rule_6') }}-->
<!--      </div>-->

      <div class="level_tip level_tip_sec cc"> <span class="icon_xx"></span>{{ t('level_page_mAward') }} </div>
      <div class="level_list level_list_sec">
        <div class="flex space_around le_l_header">
          <span> {{ t('level_page_member') }} </span>
          <span> {{ t('level_page_live') }} </span>
          <span> {{ t('home_page_slot') }} </span>
          <span> {{ t('home_page_sportsGame') }} </span>
          <span> {{ t('home_page_lotteryGame') }} </span>
          <span> {{ t('home_page_pokerGame') }} </span>
          <span> {{ t('home_page_eSports') }} </span>
        </div>
        <div class="flex align_center le_l_content">
          <div class="le_l_l le_l_l_sec">
            <div class="flex space_around le_l_l_tr" v-for="(item, index) in vipLevelRewardConfig" :key="index">
              <span> VIP{{ item.level }} </span>
              <template v-for="(item_1) in item.ratio.split(',')">
                <span> {{ toFixedNumber(Number(item_1) * 100) + '%' }} </span>
              </template>
            </div>
          </div>
        </div>

      </div>

      <div class="level_tip level_tip_sec cc"> <span class="icon_xx"></span>{{ t('level_page_rule_sec_11') }} </div>
      <div class="level_tip_content vv">
        <div>{{ t('level_page_rule_sec_1') }}</div>
        <div>
          {{ t('level_page_rule_sec_2') }}<br>
          <span>{{ t('level_page_rule_sec_3') }}</span><br>
          <span>{{ t('level_page_rule_sec_4') }}</span><br>
          <span>{{ t('level_page_rule_sec_5') }}</span><br>
        </div>
        <div>
          {{ t('level_page_rule_sec_6') }}{{ t('level_page_rule_sec_7') }}<br>
          <span>{{ t('level_page_rule_sec_8') }}</span><br>
          <span>{{ t('level_page_rule_sec_9') }}</span><br>
          <span>{{ t('level_page_rule_sec_10') }}</span>
        </div>
      </div>
    </div>

  </div>
</template>

<script setup lang='ts'>
import { onMounted, ref, watch } from 'vue';
import { useI18n } from "vue-i18n";
import H5Websocket from "@/net/Net1";
import { NetPacket } from '@/netBase/NetPacket';
import pinia from "@/store";
import { User } from '@/store/user';
import { storeToRefs } from "pinia";
import { toFixedNumber } from "@/utils/publicMethods.ts";

const { t } = useI18n();
const store = User(pinia);
const { VIPinfo }: any = storeToRefs(store);
const baseVipLevelRewardConfig = [ // 基本数据
  {
    "level": 1,
    "target_bet_money": 0,
    "promotional_reward_status": {
      "status": 0,
      "money": 0
    },
    "gift_money_amount": 0,
    "ratio": "0.004, 0.006, 0.004, 0.0005, 0.006, 0.004"
  },
]
const vipLevelRewardConfig = ref(VIPinfo.value?.vip_level_reward_config || [...baseVipLevelRewardConfig]);

// 获取等级数据
const queryData = () => {
  const query = NetPacket.req_vip_info();
  H5Websocket.sendMessageHandler(query);
}

onMounted(() => {
  queryData();
})
watch(
  () => VIPinfo.value,
  (n) => {
    if (n) {
      vipLevelRewardConfig.value = n.vip_level_reward_config;
    }
  }
);
</script>

<style lang='scss' scoped>
.level_content {
  height:calc(100vh - 50px - 70px);
  overflow-y: auto;
}

:deep(.head) {
  background: #070820;
}

.main_content {
  height: calc(100vh - 110px);
}

.level_rules {
  color: #fff;
  font-size: 12px;
  padding: 10px;
  z-index: 0;

  .level_tip {
    margin-bottom: 5px;
    font-weight: 900;
    color: #fff;
    font-size: 14px;

    &.level_tip_sec {
      margin-top: 10px;
    }
  }

  .level_list {
    margin-bottom: 10px;
    border-radius: 8px;
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.39), 0 2px 2px 0 rgba(0, 0, 0, 0.34), 0 5px 3px 0 rgba(0, 0, 0, 0.2), 0 8px 3px 0 rgba(0, 0, 0, 0.06), 0 13px 3px 0 rgba(0, 0, 0, 0.01);
    background-color: #1f2032;

    .le_l_header {
      display: flex;
      justify-content: space-around;
      position: relative;
      height: 42px;
      // background: url(/imgs/vip/headerBg.webp) center no-repeat;
      // background-size: 100%;
      box-shadow: 0px 0.5px 1px 0px rgba(117, 132, 255, 1) inset;
      background: rgba(57, 78, 255, 1);
      border-radius: 8px 8px 0 0;
      background-position-y: -4px;

      span {
        position: relative;
        height: 42px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 1;

        &::after {
          content: '';
          position: absolute;
          width: 1px;
          height: 33px;
          right: 3px;
          background: url(/imgs/vip/headerBg_line.webp) center no-repeat;
          background-size: 100%;
        }

        &:last-child {
          &::after {
            background: none;
          }
        }
      }
    }

    &.level_list_sec {
      .le_l_header {
        span {
          width: 16.66%;
        }
      }
    }

    .le_l_content {
      display: flex;
      align-items: center;
      width: 99.5%;
      margin: 0 auto;
      border-radius: 0 0 8px 8px;
      background-color: #2f1d7d;
      box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.39), 0 2px 2px 0 rgba(0, 0, 0, 0.34), 0 5px 3px 0 rgba(0, 0, 0, 0.2), 0 8px 3px 0 rgba(0, 0, 0, 0.06), 0 13px 3px 0 rgba(0, 0, 0, 0.01);

      .le_l_l {
        width: 75%;

        &.le_l_l_sec {
          width: 100%;
        }

        span {
          flex: 1;
          text-align: center;
        }

        .le_l_l_tr {
          display: flex;
          justify-content: space-around;

          &:nth-child(2n+1) {
            background: rgba(27, 26, 68, 1);
            // color: #8e82c2;
          }

          &:nth-child(2n) {
            background: #131232;
          }

          span {
            height: 40px;
            line-height: 40px;
            transform: scale(.9);
            border-right: 1px solid rgba(135, 161, 206, .2);

            &:last-child {
              border-right: 0;
            }
          }
        }

      }
    }

  }

  .level_tip_content {
    line-height: 18px;
    color: #A2A5DE;

    span {
      display: inline-block;
      // text-indent: 20px;
    }
  }

}

.cc {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 14px 0 !important;
  .tips {
    color: rgba(198, 196, 245, 1);
    font-size: 12px;
    font-weight: 400;
    i {
      display: inline-block;
      width: 1px;
      height: 10px;
      background-color: rgba(198, 196, 245, 1);
    }
  }
}

.icon_xx {
  width: 14px;
  height: 14px;
  background: url(/imgs/vip/icon_xx.png) center no-repeat;
  background-size: 100%;
}

.vv {
  div {
    color: #fff;
    font-size: 14px;
    margin-bottom: 12px;
    line-height: 20px;

    span {
      color: rgba(198, 196, 245, 1);
      font-size: 12px;
    }
  }
}
</style>
